<template>
  <div class="console-root" @touchend="_onTouchend">
    <div class="logs ios-scroll-bug" v-show="isShow">
      <p class="log" :style="{color: log.color}" v-for="log in logs" :key="log">
        {{log.content}}
      </p>
    </div>
  </div>
</template>
  
<script>
  export default {
    name: 'Console',

    data () {
      return {
        logs: [
          // {
          //   content: '123',
          //   color: '#fff'
          // }
        ],
        isShow: false,
        touchCount: 0
      }
    },

    computed: {},

    mounted () {},

    methods: {
      log (content, color = '#fff') {
        this.logs.push({content, color})
      },

      clear () {
        this.logs = []
      },

      show () {
        this.isShow = true
      },

      hide () {
        this.isShow = false
      },

      _onTouchend () {
        this.touchCount ++
        if (this.touchCount >= 3) {
          this.isShow = !this.isShow
          this.touchCount = 0
        }
        window.clearTimeout(this.tid)
        this.tid = setTimeout(() => {
          this.touchCount = 0
        }, 300)
      }
    }
  }
</script>

<style lang="stylus" scoped>
.console-root 
  position fixed
  right 0
  bottom 1.5rem
  width 1rem
  height 1rem
  background none
.logs
  position fixed
  top 4rem
  left 0
  width 100%
  height 6rem
  overflow auto
  background rgba(0,0,0,0.8)
  color #fff
  font-size 0.4rem
  line-height 0.6rem
  z-index 10
  padding 0.5rem
  box-sizing border-box
</style>
